<template>
  <div class="page-register" >
    <article class="header">
      <header>
        <span class="login">
          <em class="bold">已有账号？</em>
          <a href="/login">
            <el-button type="primary" size="small">登录</el-button>
          </a>
        </span>
      </header>
    </article>
    <el-steps :active="active" finish-status="success">
      <el-step title="步骤 1"></el-step>
      <el-step title="步骤 2"></el-step>
    </el-steps>

    <section style="text-align: center">
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
        autocomplete="off"
      >
        <div v-if="active == 0" style="margin-left: 120px">
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="ruleForm.phone" type="phone" />
          </el-form-item>

          <el-form-item label="验证" prop="isLock">
            <slider-verify-code
              v-model="ruleForm.isLock"
              @change="handlerLock"
            ></slider-verify-code>
          </el-form-item>

          <el-form-item prop="agreed">
            <el-checkbox v-model="ruleForm.agreed">同意注册协议</el-checkbox>
          </el-form-item>
        </div>
        <div v-if="active == 1">
          <!-- <el-form-item label="用户名" prop="name">
            <el-input v-model="ruleForm.name" />
          </el-form-item> -->
          <el-form-item label="真实姓名" prop="realname">
            <el-input v-model="ruleForm.realname" />
          </el-form-item>
          <el-form-item label="身份证" prop="idcode">
            <el-input v-model="ruleForm.idcode" />
          </el-form-item>
          <!-- <el-form-item label="邮箱" prop="email">
            <el-input v-model="ruleForm.email" />formrule
            <el-button size="mini" round @click="sendMsg">发送验证码</el-button>
            <span class="status">{{ statusMsg }}</span>
          </el-form-item> -->
          <!-- <el-form-item label="验证码" prop="code">
            <el-input v-model="ruleForm.code" maxlength="4" />
          </el-form-item> -->
          <el-form-item label="密码" prop="pwd">
            <el-input v-model="ruleForm.pwd" type="password" />
          </el-form-item>
          <el-form-item label="确认密码" prop="cpwd">
            <el-input v-model="ruleForm.cpwd" type="password" />
          </el-form-item>
        </div>
      </el-form>
    </section>
    <div style="margin-left:350px">
      <el-button
        v-if="active > 0"
        type="primary"
        icon="el-icon-arrow-left"
        @click="prev"
      >上一步</el-button
      >

      <el-button v-if="active == step - 1" type="primary" @click="register"
      >完成注册</el-button
      >
      <div class="error">{{ error }}</div>
    </div>
  </div>
</template>

<script>
import sliderVerifyCode from "@/components/slider-verify-code.vue";
export default {
  data() {
    const checkStatus = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请拖动滑块完成验证"));
      }
      callback();
    };
    return {
      step: 2,
      active: 0,
      statusMsg: "",
      error: "",
      ruleForm: {
        textarea: "请仔细阅读以下协议",
        agreed: false,
        phone: "",
        // name: "",
        realname: "",
        idcode: "",
        code: "",
        pwd: "",
        cpwd: "",
        email: "",
      },
      rules: {
        phone: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur",
          },
          {
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("请输入手机号"));
              } else {
                var reg = /^1[3456789]\d{9}$/;
                if (!reg.test(value)) {
                  callback(new Error("请输入有效的手机号码"));
                }
              }
            },
            trigger: "blur",
          },
        ],

        agreed: [
          {
            validator: (rule, value, callback) => {
              console.log("value:" + value);
              if (value !== true) {
                callback(new Error("请确认同意注册协议"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],

        // name: [
        //   {
        //     required: true,
        //     type: "string",
        //     message: "请输入用户名",
        //     trigger: "blur",
        //   },
        // ],

        realname: [
          {
            required: true,
            message: "请输入真实姓名",
            trigger: "blur",
          },
          {
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("请输入真实姓名"));
              } else {
                var reg = /^[\u4e00-\u9fa5]+$/;
                if (value.length < 5 && reg.test(value)) {
                  callback();
                } else {
                  return callback(new Error("请输入正确的中文名"));
                }
              }
            },
            trigger: "blur",
          },
        ],

        idcode: [
          {
            required: true,
            message: "请输入正确身份证号",
            trigger: "blur",
          },
          {
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("请输入身份证号"));
              } else {
                var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
                if (value.length == 18 && reg.test(value)) {
                  callback();
                } else {
                  return callback(new Error("请输入正确的身份证号"));
                }
              }
            },
            trigger: "blur",
          },
        ],

        // email: [
        //   {
        //     required: true,
        //     type: "email",
        //     message: "请输入邮箱",
        //     trigger: "blur",
        //   },
        // ],
        pwd: [
          {
            required: true,
            message: "创建密码",
            trigger: "blur",
          },
        ],
        cpwd: [
          {
            required: true,
            message: "确认密码",
            trigger: "blur",
          },
          {
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("请再次输入密码"));
              } else if (value !== this.ruleForm.pwd) {
                callback(new Error("两次输入密码不一致"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        isLock: [{ validator: checkStatus, trigger: "blur" }],
      },
    };
  },
  layout: "blank",

  components: {
    "slider-verify-code": sliderVerifyCode,
  },
  methods: {
    sendMsg: function () {
      const self = this;
      let namePass;
      let emailPass;
      if (self.timerid) {
        return false;
      }

      this.$refs["ruleForm"].validateField("name", (valid) => {
        namePass = valid;
      });
      self.statusMsg = "";
      if (namePass) {
        return false;
      }
      this.$refs["ruleForm"].validateField("email", (valid) => {
        emailPass = valid;
      });
      // 模拟验证码发送
    },

    next: function () {
      const resArr = [];
      this.$refs.ruleForm.validateField(["agreed", "phone","isLock"], (valid) => {
        resArr.push(valid);
      });
      // 所有valid等於空字符串時通過校驗
      if (resArr.every((v) => v === "")) {
        // 通過校驗後的操作
        this.active++;
      }
    },

    prev: function () {
      if (--this.active < 0) this.active = 0;
    },

    // 模拟登录
    register: function () {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          setTimeout(this.$router.push("/login"), 2000);
        }
      });
    },
    handlerLock(data) {
      if (data) {
        this.$refs.ruleForm.validateField('isLock');
      }
    },
  },
};
</script>

<style  rel="stylesheet/scss" lang="scss">
.page-register {
  .header {
    //border-bottom: 2px solid rgb(235, 232, 232);
    min-width: 980px;
    color: #666;

    header {
      margin: 0 auto;
      padding: 10px 0;
      width: 980px;

      .login {
        float: right;
      }

      .bold {
        font-style: normal;
      }
    }
  }

  .register {
    color: #1890ff;
  }

  a {
    color: #1890ff;
    text-decoration: none;
    background-color: transparent;
    outline: none;
    cursor: pointer;
    transition: color 0.3s;
  }

  > section {
    margin: 0 auto 30px;
    padding-top: 30px;
    width: 980px;
    min-height: 300px;
    padding-right: 550px;
    box-sizing: border-box;

    .status {
      font-size: 12px;
      margin-left: 20px;
      color: #e6a23c;
    }

    .error {
      color: red;
    }
  }

  .footer {
    text-align: center;
  }
}
</style>

